/*
*---------------------------------------------
*   style sheets for Social network
*   Version 1.0
*   Last updated 26/09/2023
*   Designed by: Simon Gibson
*   For: Red Star Websites
*---------------------------------------------
*/

    /* Add some shadows to create a card effect */
    .miniProfile {
        float: left;
        width: 100%;
        margin-top: 16px;
        margin-right: 16px;
        margin-bottom: 0px;
        padding: 0 8px;
        padding-top: 8px;
        background-color: var(--color-1);
        color: var(--font-color-1);
        box-shadow: 8px 8px 10px black;
        cursor: pointer;
    }

    .baseProfile {
        float: left;
        width: 100%;
        margin-right: 16px;
        margin-bottom: 16px;
        padding: 0 8px;
        padding-top: 8px;
        background-color: var(--color-1);
        color: var(--font-color-1);
        box-shadow: 8px 8px 10px black;
    }

    /* Display the columns below each other instead of side by side on small screens */
    @media screen and (min-width: 650px) {
        .miniProfile {
            width: 100px;
            display: block;
        }
        .baseProfile {
            width: 250px;
            display: block;
        }
    }

    /* Some left and right padding inside the container */
    .baseProfilePage {
        padding: 0 16px;
    }

    /* Clear floats */
    .container::after, .row::after {
        content: "";
        clear: both;
        display: table;
    }

    .miniProfilePage h2 {
        text-align:center;
        font-size: 12px;
    }

    .baseProfilePage h2 {
        text-align:center;
    }

    .baseProfilePage .title {
        color: grey;
        text-align:center;
    }

    .baseProfilePage button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
    }

    .baseProfilePage button:hover {
        background-color: var(--color-2);
    }

    /* @media reverence */
    /* Extra small devices (phones, 600px and down) 
    @media only screen and (max-width: 600px) {...}

    Small devices (portrait tablets and large phones, 600px and up)
    @media only screen and (min-width: 600px) {...}

    Medium devices (landscape tablets, 768px and up) 
    @media only screen and (min-width: 768px) {...}

    Large devices (laptops/desktops, 992px and up) 
    @media only screen and (min-width: 992px) {...}

    Extra large devices (large laptops and desktops, 1200px and up) 
    @media only screen and (min-width: 1200px) {...}*/